<template>
  <footer>
        <div class="g-ft">
            <div class="m-ft">
                <div class=" f-cb">
                    <div class="copy">
                        <p class="link">
                            <a href="">服务条款</a>
                            <span class="line">|</span>
                            <a href="">隐私政策</a>
                            <span class="line">|</span>
                            <a href="">儿童隐私政策</a>
                            <span class="line">|</span>
                            <a href="">版权投诉指引</a>
                            <span class="line">|</span>
                            <a href="">意见反馈</a>
                            <span class="line">|</span>
                            <a href="">广告合作</a>

                        </p>
                        <p class="rgihts">
                            <span class="sep">网易公司版权所有©1997-2021</span>
                            <span class="spoan">杭州乐读科技有限公司运营：</span>
                            <span class="spoan">浙网文[2021] 1186-054号</span>
                        </p>
                        <p class="contans">
                            <span class="sep">违法和不良信息举报电话：0571-89853516</span>
                            <span class="spoan">举报邮箱：</span>
                            <a href="">ncm5990@163.com</a>
                        </p>
                        <p class="rgihts">
                            <a href="">粤B2-20090191-18 工业和信息化部备案管理系统网站</a>
                            <a href="">
                                <span class="losgo"></span>
                                <span class="ploce-text">浙公网安备 33010902002564号</span>
                            </a>
                        </p>

                    </div>
                    <ul class="enters">
                        <li class="unit">
                            <a href="" class="logo"></a>
                            <span class="tts"></span>
                        </li>
                        <li class="unit">
                            <a href="" class="logo"></a>
                            <span class="tts"></span>
                        </li>
                        <li class="unit">
                            <a href="" class="logo"></a>
                            <span class="tts"></span>
                        </li>
                        <li class="unit">
                            <a href="" class="logo"></a>
                            <span class="tts"></span>
                        </li>
                        <li class="unit">
                            <a href="" class="logo"></a>
                            <span class="tts"></span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <a href="javascript:;"  v-if="isShow" @click="backtop" class="m-back">回到顶部</a>
    </footer>
</template>

<script>
export default {
// 回到顶部 
 data () {
    return {
      isShow: false
    };
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop);
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop);
  },
  methods: {
    backtop () {
      let timer = setInterval(() => {
        let ispeed = Math.floor(-this.scrollTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop = this.scrollTop + ispeed;
        if (this.scrollTop === 0) {
          clearInterval(timer);
        }
      }, 16);
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
      this.scrollTop = scrollTop;
      if (this.scrollTop > 60) {
        this.isShow = true;
      } else {
        this.isShow = false;
      }
    }
  }

}
</script>

<style>
footer{
    font-size: 12px;
}
.g-ft {
    position: relative;
    height: 172px;
    overflow: hidden;
    border-top: 1px solid #d3d3d3;
    background: #f2f2f2;
}
.m-ft {
    width: 980px;
    margin: 0 auto;
}
.m-ft .copy {
    float: left;
    width: 520px;
    padding-top: 15px;
    line-height: 24px;
}
.m-ft .enters {
    width: 420px;
    margin-top: 33px;
    float: right;
}
.link a {
    color: #999;
}
a {
    cursor: pointer;
    text-decoration: none;
}
.m-ft .enters .unit {
    float: left;
    width: 60px;
    height: 70px;
    padding-left: 23px;
    text-align: center;
    color: #666;
}
.m-ft .enters .unit .logo {
    background: url(https://s2.music.126.net/style/web2/img/foot_enter_new.png?1a1c0c9…)no-repeat -63px -456.5px;
    background-size: 110px 552px;
    display: block;
    float: none;
    width: 50px;
    height: 45px;
    margin: 0 auto;
}
.m-ft .copy .line {
    margin: 0 8px 0 10px;
    color: #c2c2c2;
}
.m-back {
    display: block;
    position: fixed;
    background: url(https://s2.music.126.net/style/web2/img/sprite.png?1695155…)no-repeat;
    text-indent: -9999px;
    left: 50%;
    margin-left: 500px;
    bottom: 160px;
    width: 49px;
    height: 44px;
    background-position: -265px -47px;
}
.s-fc3, a.s-fc3:hover {
    color: #666;
}
span,a{
    color: #666;
}
.m-ft .enters .tts {
    background-position: 0 -108px;
    margin-left: -6px;
    width: 72px;
    display: inline-block;
    margin: 5px 5px 0;
    background: url(https://s2.music.126.net/style/web2/img/foot_enter_tt.png?5602c97…)no-repeat;
    background-size: 180px 139px;
    height: 14px;
}
</style>